<template>
  <div class='edit-item-dialog'>
    <el-dialog :visible.sync="visible"
               width="660px"
               :title="(dialogStatus === 'create' ? '新增' : '编辑') +text"
               :close-on-click-modal="false"
               @close="dialogClose">
      <el-form :model="editItemForm"
               :rules="formRules"
               ref="itemForm"
               label-width="100px">
        <el-form-item :label="text+'名称'"
                      prop="check_item_name">
          <el-input v-model="editItemForm.check_item_name"
                    :placeholder="'请输入'+text+'名称'">
          </el-input>
        </el-form-item>
        <el-form-item label="备注"
                      prop="remark">
          <el-input type="textarea"
                    v-model="editItemForm.remark"
                    placeholder="请输入备注">
          </el-input>
        </el-form-item>
        <el-form-item label="启用工程云" prop="is_gcy">
            <div class="inline-item">
              <el-switch v-model="editItemForm.is_gcy"
                         active-color="#13ce66"
                         :active-value="1"
                         :inactive-value="0"
                         inactive-color="#ff4949">
              </el-switch>
            </div>
          </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="editItem"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      visible: false,
      editItemForm: {
        check_item_name: '',
        remark: '',
        item_type: '',
        is_gcy: 1,//使用工程云
      },
      resetForm: {
        check_item_name: '',
        remark: '',
        item_type: '',
        is_gcy: 1,//使用工程云
      },
      // 按钮文字及表格文字区分，老页面为 检查项，新页面为 表单
      text: this.$route.meta.version === '1.2.2' ? '表单' : '检查项',
      formRules: {
        check_item_name: [
          { required: true, message: `请输入检查项名称`, trigger: 'blur' },
          { min: 1, max: 10, message: `检查项名称长度在1-10之间`, trigger: 'blur' }
        ],
        remark: [
          // { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },

    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogStatus: {
      type: String,
      default: "create"
    },
    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval, oldval) {
        if (this.$route.meta.version === '1.2.2') {
          this.formRules.check_item_name[0].message = '请输入表单名称'
          this.formRules.check_item_name[1].message = '表单名称长度在1-10之间'
        } else {
          this.formRules.check_item_name[0].message = '请输入检查项名称'
          this.formRules.check_item_name[1].message = '检查项名称长度在1-10之间'
        }
        let temp = JSON.parse(JSON.stringify(newval));
        let reset = JSON.parse(JSON.stringify(this.resetForm))
        this.editItemForm = Object.assign(reset, temp)
        // console.log(newval, this.editItemForm, 'watch')
      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.$refs.itemForm.resetFields();
      this.$emit("update:dialogVisible", false);
    },
    editItem () {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          if (this.dialogStatus === "create") {
            this.createItem();
          } else {
            this.updateItem();
          }
        }
      });
    },
    createItem () {
      // 1.2.2版本添加检查项时通过item_type区分，1原检查项，2表单
      let version = this.$route.meta.version
      if (version === '1.2.2') {
        this.editItemForm.item_type = '2'
      } else {
        this.editItemForm.item_type = '1'
      }
      CommonCheckApi.createCheckItem({
        data: this.editItemForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success(`新增${this.text}成功`);
          this.dialogClose();
          this.$emit("callback", "");
        }
      })
    },
    updateItem () {
      // 1.2.2版本添加检查项时通过item_type区分，1原检查项，2表单
      let version = this.$route.meta.version
      if (version === '1.2.2') {
        this.editItemForm.item_type = '2'
      } else {
        this.editItemForm.item_type = '1'
      }
      console.log(this.editItemForm, 'update')
      CommonCheckApi.updateCheckItem({
        data: this.editItemForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success(`修改${this.text}成功`);
          this.dialogClose();
          this.$emit("callback", "");
        }
      })
    }
  },
  created () {
    // this.editItemForm = JSON.parse(JSON.stringify(this.dialogForm));
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
</style>